<template>
  <div class="home">
    <gltitle
        :is_mt="true"
        :is_notice="false"
        :is_back="true"
        :is_name="true"
        :title="title"
        :is_right="true"
    ></gltitle>

    <div class="container">
      <div class="itemBox" style="margin-top: 0.32rem">
        <div class="name">{{ $t("new.doc43") }}</div>
        <div class="set db" @click="Chain_show = true">
          <div class="n flexs bi-wrap">
<!--            <img :src="chainIcon" alt="">-->
            <input type="text" v-model="bi_name" readonly/>
          </div>
          <div class="str">
            <van-icon name="arrow"/>
          </div>
        </div>
      </div>

      <div class="itemBox">
        <div class="name">{{ $t("page1.doc50") }}</div>
        <div class="set db" @click="Chain_show = true">
          <div class="n flexs">
            <input type="text" v-model="tokenType" readonly/>
          </div>
          <div class="str">
            <van-icon name="arrow"/>
          </div>
        </div>
      </div>

      <div class="qr">
        <div class="mbox">
          <div id="qrcode" :ref="`qrCodeUrl${chainName}`"></div>
        </div>
        <div class="save_picture" @click="downloadCode">
          <img src="../../assets/images/icon_download.png" alt=""/>
          {{ $t("page1.doc51") }}
          <!--          <button @click="downloadCode"></button>-->
        </div>
        <div class="copy-info">
          <div class="name">
            <div class="nl">
              {{ $t("page.doc14") }}
            </div>
          </div>
          <div class="n flexs text-overflow">
            {{ address }}
            <div
                class="str"
                v-clipboard:copy="address"
                v-clipboard:success="onCopy"
            >
              <img src="../../assets/images/icon_copy_yellow.png" alt=""/>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="p_name">{{ $t('page1.doc53') }}:</div> -->
      <div class="p" v-html="tipsInfo.description"></div>
    </div>

    <van-popup
        v-model="Chain_show"
        round
        closeable
        position="bottom"
        style="background: none"
    >
      <div class="popCoin">
        <div class="name">{{ $t("new.doc44") }}</div>
        <ul class="tab flex">
          <li
              v-for="(item, k) in coInData"
              :key="k"
              :class="{ on: item.coinId == actCoinId }"
              @click="onSet(item)"
          >
            <img :src="item.coinIcon" alt=""/>
            {{ item.coinName }}
          </li>
        </ul>
        <ul class="line">
          <li
              v-for="(item, k) in actChainList"
              :key="k"
              class="flex"
              :class="{ on: item.chainName == actchainName }"
              @click="onTab(item)"
          >
            <div class="ico"><img :src="item.chainIcon" alt=""/></div>
            <div class="flex1">
              <div class="title">{{ item.chainDesc }}</div>
              <div class="str">
                <p>
                  {{ $t("new.doc46") }}≈{{
                    $t("new.doc47", {n1: item.arrivalTime})
                  }}
                </p>
                <p>
                  {{ $t("new.doc45") }}{{ item.rechargeMinNum }}
                  {{ actbi_name }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </van-popup>

    <van-popup v-model="bi_show" round position="bottom">
      <van-picker
          :title="$t('page.doc9')"
          show-toolbar
          :columns="biData"
          @confirm="onConfirm"
          @cancel="onCancel"
          item-height=".8rem"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
      />
    </van-popup>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      title: this.$t("title.doc28"),
      tabId: "0",
      Chain_show: false,
      bi_name: "",
      bi_show: false,
      address: "",
      coinId: "",
      chainName: "",
      tokenType: "",
      biData: [],
      tabData: [],
      coInData: [],
      tipsInfo: {},
      actChainList: [],
      actchainName: "",
      actCoinId: "",
      actbi_name: "",
      chainIcon: ""
    };
  },

  mounted() {
    this.getBilist(0);
    this.getTipsInfo();
  },
  methods: {
    async getTipsInfo() {
      const url = this.URL.home.article;
      const params = {categoryType: "RECHARGE_RULES"};
      const res = await this.$post(url, params);
      if (res.code != 0) return;
      this.tipsInfo = res.data;
    },
    // 下载
    downloadCode() {
      const qrcode = this.$refs[`qrCodeUrl${this.chainName}`];
      const canvas = qrcode.querySelector("canvas");
      const imgurl = canvas.toDataURL("image/jpeg");
      const a = document.createElement("a");
      a.href = imgurl;
      a.download = `${this.chainName}.png`; // 图片名称
      a.click();
      this.$toast(this.$t("page1.doc54"));
    },
    // getBilist(id){
    //   this.$post(this.URL.wallet.coinList, {filterType:2}).then((res) => {
    //     if (res.code == 0) {
    //       this.coinId = res.data[id].coinId
    //       this.bi_name = res.data[id].coinName
    //       this.tabData = res.data[id].multiChainData
    //       this.chainName = res.data[id].multiChainData[0].chainName
    //       this.tokenType = res.data[id].multiChainData[0].tokenType
    //
    //       this.coInData = res.data
    //       res.data.forEach((e) => {
    //         this.biData.push({
    //               name:e.coinName,
    //               code:e.coinId
    //             }
    //         )
    //       })
    //       this.getConfig()
    //     }
    //   });
    // },

    getBilist(id) {
      this.$post(this.URL.wallet.coinList, {type: 1}).then((res) => {
        if (res.code == 0) {
          this.coinId = res.data[id].coinId;
          this.actCoinId = this.coinId;
          this.bi_name = res.data[id].coinName;
          this.coInData = res.data;
          this.actbi_name = this.bi_name;
          this.actChainList = res.data[id].multiChainData;
          this.actchainName = res.data[id].multiChainData[0].chainName;
          this.tokenType = res.data[id].multiChainData[0].tokenType;
          this.chainName = res.data[id].multiChainData[0].chainName;
          res.data.forEach((e) => {
            this.biData.push(e.coinName);
          });
          this.getConfig();
          // this.getBiInfo(this.coinId)
        }
      });
    },
    getBiInfo(id) {
      this.$post(this.URL.wallet.coinInfos, {
        coinId: id,
      }).then((res) => {
        if (res.code == 0) {
          this.tabData = res.data.multiChainData;
          this.chainName = res.data.multiChainData[0].chainName;
          this.tokenType = res.data.multiChainData[0].tokenType;
          this.getConfig();
        }
      });
    },

    onTab(item) {
      console.log("=>(recharge.vue:237) item", item);
      this.chainName = item.chainName;
      this.tokenType = item.tokenType;
      this.coinId = this.actCoinId;
      this.bi_name = this.actbi_name;
      this.address = "";
      this.getConfig();
      this.Chain_show = false;
      this.chainIcon = item.chainIcon
    },
    onSet(item, k) {
      // this.bi_show = false;
      this.actCoinId = item.coinId;
      this.actbi_name = item.coinName;
      this.actChainList = item.multiChainData;
      this.actchainName = item.multiChainData[0].chainName;

      // this.tabData = this.coInData[k].multiChainData;
      // this.getConfig();
    },
    onConfirm(value, index) {
      this.bi_name = value;
      this.coinId = this.coInData[index].coinId;
      console.log(value);
      //this.bi_show = false;
      this.getConfig();
      //this.getBiInfo(this.coinId)
    },
    onCancel() {
      this.bi_show = false;
    },

    // onTab(item,k){
    //   this.chainName = item.chainName
    //   this.tokenType = item.tokenType
    //   this.address = ''
    //   this.getConfig()
    // },

    getConfig() {
      this.$post(this.URL.user.wallet_address, {
        coinId: this.coinId,
        chainName: this.chainName,
      }).then((res) => {
        if (res.code == 0) {
          this.address = res.data.address;
          document.getElementById("qrcode").innerHTML = "";
          let long = document.documentElement.clientWidth * (180 / 375);
          var qrcode = new QRCode(this.$refs[`qrCodeUrl${this.chainName}`], {
            text: this.address, // 需要转换为二维码的内容
            width: long,
            height: long,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
          });

          this.$nextTick(() => {
            const qrcode = this.$refs[`qrCodeUrl${this.chainName}`];
            if (qrcode) {
              qrcode.querySelector("canvas").className = "canvas";
            }
          });
        } else {
          this.$toast(res.message);
        }
      });
    },
    onCopy(e) {
      this.$toast(this.$t("page1.doc52"));
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 0.5rem;
}

.itemBox {
  //background: var(--CObackgroundLinear2);
  border-radius: 0.12rem;
  box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 0, 0, 0.06);
  margin-bottom: 0.32rem;
  padding: 0;
  background: transparent;

  .n {
    color: var(--COcolor1);
  }

  .name {
    font-size: 0.32rem;
    font-family: PingFangTC-Medium, PingFangTC;
    font-weight: 500;
    color: #fff;
    line-height: 0.4rem;
    margin-bottom: 0.24rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .nl {
      color: #878B97;
    }

    .str {
      display: flex;
      align-items: center;
      font-size: 0.28rem;
      font-weight: 400;

      img {
        height: 0.26rem;
        margin-right: 0.12rem;
      }
    }

    .n {
      margin-bottom: 0.12rem;
    }
  }

  .biName {
    font-size: 0.36rem;
    font-weight: 500;
    line-height: 0.5rem;
    margin-bottom: 0.3rem;

    img {
      height: 0.5rem;
      margin-right: 0.1rem;
      vertical-align: top;
    }
  }

  .tab {
    li {
      font-size: 0.32rem;
      font-family: PingFangTC-Medium, PingFangTC;
      font-weight: 500;
      color: var(--COcolor3);
      height: 0.6rem;
      line-height: 0.6rem;
      background: var(--CObackgroundLinear3);
      border-radius: 0.1rem;
      margin-right: 0.2rem;
      padding: 0 0.3rem;

      &.on {
        background: var(--CObackgroundLinear1);
        color: var(--COcolor3);
      }
    }
  }

  .set {
    font-size: 0.24rem;
    background: #181c21;
    height: 0.96rem;
    border-radius: 0.2rem;
    padding: 0.28rem;

    input {
      width: 100%;
      height: 0.6rem;
      border: 0;
      background: none;
    }

    .str {
      color: #fff;
      margin-left: 0.2rem;
    }

    .n {
    }
  }
}

.mbox {
  width: 3.24rem;
  height: 3.24rem;
  background: #fff;
  //margin: 0.14rem auto;
  padding: 12px;
  border-radius: 10px;

  /deep/ img {
    width: 100%;
  }
}

.save_picture {
  //margin: 0.3rem 0rem 0.5rem 0rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  //text-align: center;
  color: #FFDD9A;
}

.p_name {
  font-size: 0.24rem;
  font-family: PingFangTC-Regular, PingFangTC;
  font-weight: 400;
  color: var(--COcolor1);
  margin-bottom: 0.16rem;
}

.p {
  font-size: 0.24rem;
  color: var(--COcolor1);
  line-height: 0.32rem;
  margin-top: 0.32rem;
}

.popCoin {
  border-radius: 0.32rem 0.32rem 0rem 0rem;
  background: #181c21;
  padding: 0.32rem;
  width: 100%;

  .name {
    color: #fff;
    text-align: center;
    font-size: 0.32rem;
    font-style: normal;
    font-weight: 500;
    line-height: 0.32rem; /* 100% */
    text-transform: capitalize;
  }

  .tab {
    margin: 0.32rem 0;

    li {
      height: 0.8rem;
      display: flex;
      align-items: center;
      margin-right: 0.16rem;
      padding: 0 0.24rem;
      color: #848fa0;
      font-size: 0.32rem;
      font-weight: 400;

      img {
        margin-right: 0.08rem;
        width: 0.48rem;
        height: 0.48rem;
      }

      &.on {
        border-radius: 0.16rem;
        border-top: 2px solid #ffdd9a;
        color: #834700;
        background: linear-gradient(90deg, #fad7a6 0%, #daab6a 100%);
      }
    }
  }

  .line {
    max-height: 6.8rem;
    min-height: 6.5rem;
    overflow-y: scroll;

    li {
      border-radius: 0.24rem;
      //background: #121622;
      margin-bottom: 0.24rem;
      padding: 0.32rem;
      border: 2px solid #181c21;

      &.on {
        border: 2px solid #ffdd9a;
        position: relative;
        //background: #121622 url("../../assets/images/tab_on.png") no-repeat
        //  right top;
        //background-size: 0.64rem 0.64rem;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          width: 0.4rem;
          height: 0.4rem;
          background: url("../../assets/images/Vector.png") no-repeat center center;
        }
      }

      .ico {
        margin-right: 0.08rem;
        display: flex;
        align-items: center;

        img {
          width: 1.04rem;
          height: 1.04rem;
        }
      }

      .title {
        color: #fff;
        font-size: 0.28rem;
        font-weight: 500;
        line-height: 0.28rem; /* 100% */
        text-transform: uppercase;
        margin-bottom: 0.24rem;
      }

      p {
        color: #848fa0;
        font-family: "PingFang SC";
        font-size: 0.24rem;
        font-style: normal;
        font-weight: 400;
        line-height: 0.24rem; /* 100% */
        text-transform: uppercase;
        margin-bottom: 0.16rem;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .str {
        p {
          color: #d4d4d5;
        }
      }
    }
  }
}

.qr {
  // background-color: #fff;
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.16rem;
  color: #000;
  padding: 40px 0;
  margin-top: 0.48rem;

  .nl {
    color: #878B97;
    text-align: center;
    color: #878b97;
    margin-top: 0.17rem;
    margin-bottom: 0.2rem;
  }

  .n {
    display: flex;
    align-items: center;
    margin-top: 0.14rem;
    gap: 0.14rem;
  }

  .copy-info {
    img {
      width: 0.26rem;
      height: 0.26rem;
    }

    .nl {
      margin: 10px 0;
    }

    color: #fff;
  }

  .save_picture {
    display: flex;
    align-items: center;
    gap: 0.12rem;

    img {
      width: 0.32rem;
      height: 0.32rem;
    }
  }
}

.bi-wrap {
  display: flex;
  align-items: center;
  gap: 4px;

  img {
    width: 22px;
    transform: translateY(-2px);
  }
}
</style>
